import React, { useEffect, useState } from 'react';
import { Row, Col, Radio } from 'antd';
import { type ColumnsType } from '@/components/ProTableComp';
import { getSaleStatistics, getSaleSummary } from '@/api/modules/analysisData';
import SearchComp from '@/components/ProTableComp/components/SearchComp';
import Chart from '@/views/analysisData/components/Pie';
import SalePie from '@/views/analysisData/components/SalePie';
import LinkChart from '@/views/analysisData/components/LinkChart';
import ColumnsChart from '@/views/analysisData/components/ColumnsChart';

import './index.less';

const PIRMAP: any = {
	game: '游戏销量占比',
	user: '员工销售占比',
	channel: '渠道销量占比',
};
const Page = () => {
	const [searchColumns, setSearchColumns] = useState([]);
	const [detailData, setDetailData]: any = useState({
		pieData: { channel: [], game: [], user: [] },
		summaryData: { daily: {}, summary: {}, user: [] },
	});
	
	const getSearchColumns = (res?: any): ColumnsType[] => {
		console.log(res, setSearchColumns, 'res');
		return [{
			title: '游戏',
			valueType: 'select',
		}, {
			title: '销售渠道',
			valueType: 'select',
		}, {
			title: '员工',
			valueType: 'select',	
		}, {
			title: '日期',
			valueType: 'dateRange',
		}]
	};

	const onRadioChange = (e: any) => { console.log(e, 'eee') };

	const fetchData = async () => {
		try {
			const asyncArr = [getSaleStatistics(), getSaleSummary()];
			const [statisticsRes, summaryRes] = await Promise.all(asyncArr);
			setDetailData((pre: any) => ({
				...pre,
				pieData: { ...(statisticsRes.data || {}) },
				summaryData: { ...(summaryRes.data || {}) }
			}));
		} catch (err) {
			console.log(err);
		}
	};

	useEffect(() => {
		fetchData();
	}, []);

	return (
		<div className="analy analy-sale-order">
			<div className="search-wrap">
				<SearchComp
					columns={searchColumns.length ? searchColumns : getSearchColumns()}
					hideScheme={true}
					hideSeach={true}
				/>
			</div>
			<div className="analy-content-box">
				<Radio.Group onChange={onRadioChange} style={{ width: '100%' }}>
					<Row className="pie-wrap" gutter={[16, 16]}>
						{
							Object.keys(detailData.pieData).map((item: any) => {
								return (
									<Col xs={24} md={12} lg={12} xxl={8} xl={12} key={item}>
										<div className="radio-wrap"><Radio value={item}>{PIRMAP[item]}</Radio></div>
										{ detailData.pieData[item].length ? <Chart data={detailData.pieData[item]} /> : '' }
									</Col>
								)
							})
						}
					</Row>
				</Radio.Group>
				<Row className="other-wrap" gutter={[16, 16]}>
					<Col xs={24} md={4} lg={4} xxl={4} xl={4}>
						<SalePie {...(detailData.summaryData.summary || {})} />
					</Col>
					<Col xs={24} md={12} lg={12} xxl={12} xl={12}>
						<ColumnsChart
							data={detailData.summaryData.user || []}
						/>
					</Col>
					<Col xs={24} md={8} lg={8} xxl={8} xl={8}>
						<LinkChart />
					</Col>
				</Row>
			</div>
		</div>
	);
};

export default Page;
